<template>
    <div class="enhanced-weather-page">
        <!-- 顶部导航栏 -->
        <div class="top-navbar">
            <div class="nav-content">
                <div class="nav-left">
                    <h1 class="nav-title">
                        <span class="title-icon">🌤️</span>
                        MES智能天气预警系统
                    </h1>
                </div>
                <div class="nav-right">
                    <div class="system-status">
                        <div class="status-item">
                            <span class="status-label">系统状态</span>
                            <span class="status-value online">在线</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">更新时间</span>
                            <span class="status-value">{{ formatDateTime(new Date()) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 快速操作卡片 -->
            <div class="quick-actions">
                <div class="action-card" @click="showWeatherAnalysis">
                    <div class="action-icon">🌦️</div>
                    <div class="action-title">天气分析</div>
                    <div class="action-desc">实时天气影响评估</div>
                </div>
                <div class="action-card" @click="showProductionOverview">
                    <div class="action-icon">🏭</div>
                    <div class="action-title">生产概览</div>
                    <div class="action-desc">生产数据实时监控</div>
                </div>
                <div class="action-card" @click="showEquipmentStatus">
                    <div class="action-icon">⚙️</div>
                    <div class="action-title">设备状态</div>
                    <div class="action-desc">设备健康度监控</div>
                </div>
                <div class="action-card" @click="showSafetyAnalysis">
                    <div class="action-icon">🚨</div>
                    <div class="action-title">安全分析</div>
                    <div class="action-desc">安全事件预警</div>
                </div>
            </div>

            <!-- 天气分析详情模态框 -->
            <div v-if="showWeatherAnalysisModal" class="modal-overlay" @click="closeWeatherAnalysisModal">
                <div class="modal-content" @click.stop>
                    <div class="modal-header">
                        <h3 class="modal-title">🌦️ 天气影响分析</h3>
                        <button class="modal-close" @click="closeWeatherAnalysisModal">×</button>
                    </div>

                    <div class="modal-body">
                        <!-- 城市选择 -->
                        <div class="analysis-section">
                            <div class="section-title">📍 选择城市</div>
                            <div class="city-selector">
                                <input v-model="analysisCity" @keyup.enter="analyzeWeatherImpact" placeholder="输入城市名称"
                                    class="city-input" />
                                <button @click="analyzeWeatherImpact" class="btn btn-primary">
                                    分析影响
                                </button>
                            </div>
                        </div>

                        <!-- 生产活动类型选择 -->
                        <div class="analysis-section">
                            <div class="section-title">🏭 生产活动类型</div>
                            <div class="activity-selector">
                                <label class="activity-option">
                                    <input type="radio" v-model="selectedActivityType" value="户外作业" />
                                    <span class="activity-label">户外作业</span>
                                </label>
                                <label class="activity-option">
                                    <input type="radio" v-model="selectedActivityType" value="物流运输" />
                                    <span class="activity-label">物流运输</span>
                                </label>
                                <label class="activity-option">
                                    <input type="radio" v-model="selectedActivityType" value="设备维护" />
                                    <span class="activity-label">设备维护</span>
                                </label>
                            </div>
                        </div>

                        <!-- 分析结果 -->
                        <div v-if="weatherImpactAnalysis" class="analysis-section">
                            <div class="section-title">📊 分析结果</div>

                            <!-- 风险等级 -->
                            <div class="risk-level-card" :class="getRiskLevelClass(weatherImpactAnalysis.riskLevel)">
                                <div class="risk-icon">⚠️</div>
                                <div class="risk-content">
                                    <div class="risk-title">风险等级</div>
                                    <div class="risk-value">{{ getRiskLevelText(weatherImpactAnalysis.riskLevel) }}
                                    </div>
                                </div>
                            </div>

                            <!-- 当前天气影响 -->
                            <div class="impact-card">
                                <div class="impact-header">
                                    <span class="impact-icon">🌡️</span>
                                    <span class="impact-title">当前天气影响</span>
                                </div>
                                <div class="impact-content">
                                    <div class="impact-item">
                                        <span class="item-label">温度:</span>
                                        <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.temp
                                        }}°C</span>
                                    </div>
                                    <div class="impact-item">
                                        <span class="item-label">天气:</span>
                                        <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.text }}</span>
                                    </div>
                                    <div class="impact-item">
                                        <span class="item-label">湿度:</span>
                                        <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.humidity
                                        }}%</span>
                                    </div>
                                    <div class="impact-item">
                                        <span class="item-label">风速:</span>
                                        <span class="item-value">{{ weatherImpactAnalysis.currentWeather?.windSpeed
                                        }}km/h</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 生产建议 -->
                            <div class="recommendations-card">
                                <div class="recommendations-header">
                                    <span class="recommendations-icon">💡</span>
                                    <span class="recommendations-title">生产建议</span>
                                </div>
                                <div class="recommendations-list">
                                    <div v-for="(rec, index) in weatherImpactAnalysis.recommendations" :key="index"
                                        class="recommendation-item">
                                        <span class="rec-number">{{ index + 1 }}</span>
                                        <span class="rec-text">{{ rec }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 预警信息 -->
                            <div v-if="weatherImpactAnalysis.alerts.length > 0" class="alerts-card">
                                <div class="alerts-header">
                                    <span class="alerts-icon">🚨</span>
                                    <span class="alerts-title">预警信息</span>
                                </div>
                                <div class="alerts-list">
                                    <div v-for="alert in weatherImpactAnalysis.alerts" :key="alert.id"
                                        class="alert-item" :class="getAlertSeverityClass(alert.severity)">
                                        <div class="alert-header">
                                            <span class="alert-severity">{{ getAlertSeverityText(alert.severity)
                                            }}</span>
                                            <span class="alert-activity">{{ alert.activityName }}</span>
                                        </div>
                                        <div class="alert-description">{{ alert.impact }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 历史趋势分析 -->
                        <div v-if="weatherTrends.length > 0" class="analysis-section">
                            <div class="section-title">📈 天气趋势分析</div>
                            <div class="trends-grid">
                                <div v-for="trend in weatherTrends" :key="trend.date" class="trend-card">
                                    <div class="trend-date">{{ formatDate(trend.date) }}</div>
                                    <div class="trend-change">
                                        <span class="change-icon" :class="getTrendIconClass(trend.temperatureChange)">
                                            {{ getTrendIcon(trend.temperatureChange) }}
                                        </span>
                                        <span class="change-value">{{ trend.temperatureChange > 0 ? '+' : '' }}{{
                                            trend.temperatureChange
                                        }}°C</span>
                                    </div>
                                    <div class="trend-risk">
                                        风险增加: {{ trend.riskIncrease.toFixed(1) }}%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 生产概览模态框 -->
            <div v-if="showProductionOverviewModal" class="modal-overlay" @click="closeProductionOverviewModal">
                <div class="modal-content" @click.stop>
                    <div class="modal-header">
                        <h3 class="modal-title">🏭 生产数据概览</h3>
                        <button class="modal-close" @click="closeProductionOverviewModal">×</button>
                    </div>

                    <div class="modal-body">
                        <!-- 生产指标概览 -->
                        <div class="analysis-section">
                            <div class="section-title">📊 生产指标概览</div>
                            <div class="metrics-grid">
                                <div class="metric-item">
                                    <div class="metric-icon">📈</div>
                                    <div class="metric-info">
                                        <div class="metric-value">{{ productionDashboard?.productionEfficiency }}%</div>
                                        <div class="metric-label">生产效率</div>
                                    </div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-icon">✅</div>
                                    <div class="metric-info">
                                        <div class="metric-value">{{ productionDashboard?.qualityRate }}%</div>
                                        <div class="metric-label">质量合格率</div>
                                    </div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-icon">🛡️</div>
                                    <div class="metric-info">
                                        <div class="metric-value">{{ productionDashboard?.safetyScore }}%</div>
                                        <div class="metric-label">安全评分</div>
                                    </div>
                                </div>
                                <div class="metric-item">
                                    <div class="metric-icon">⚡</div>
                                    <div class="metric-info">
                                        <div class="metric-value">{{ productionDashboard?.runningEquipment }}/{{
                                            productionDashboard?.totalEquipment }}</div>
                                        <div class="metric-label">设备运行率</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 订单状态 -->
                        <div class="analysis-section">
                            <div class="section-title">📋 订单状态</div>
                            <div class="orders-summary">
                                <div class="order-status-item">
                                    <div class="status-icon completed">✅</div>
                                    <div class="status-info">
                                        <div class="status-value">{{ productionDashboard?.completedOrders }}</div>
                                        <div class="status-label">已完成</div>
                                    </div>
                                </div>
                                <div class="order-status-item">
                                    <div class="status-icon pending">⏳</div>
                                    <div class="status-info">
                                        <div class="status-value">{{ productionDashboard?.pendingOrders }}</div>
                                        <div class="status-label">进行中</div>
                                    </div>
                                </div>
                                <div class="order-status-item">
                                    <div class="status-icon delayed">⚠️</div>
                                    <div class="status-info">
                                        <div class="status-value">{{ productionDashboard?.delayedOrders }}</div>
                                        <div class="status-label">延期</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 人员状态 -->
                        <div class="analysis-section">
                            <div class="section-title">👥 人员状态</div>
                            <div class="workers-summary">
                                <div class="worker-status-item">
                                    <div class="status-icon active">🟢</div>
                                    <div class="status-info">
                                        <div class="status-value">{{ productionDashboard?.activeWorkers }}</div>
                                        <div class="status-label">在岗</div>
                                    </div>
                                </div>
                                <div class="worker-status-item">
                                    <div class="status-icon break">🟡</div>
                                    <div class="status-info">
                                        <div class="status-value">{{ productionDashboard?.onBreakWorkers }}</div>
                                        <div class="status-label">休息</div>
                                    </div>
                                </div>
                                <div class="worker-status-item">
                                    <div class="status-icon total">🔵</div>
                                    <div class="status-info">
                                        <div class="status-value">{{ productionDashboard?.totalWorkers }}</div>
                                        <div class="status-label">总人数</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 天气影响分析 -->
                        <div class="analysis-section">
                            <div class="section-title">🌦️ 天气对生产的影响</div>
                            <div class="weather-impact-summary">
                                <div class="impact-item">
                                    <div class="impact-icon">🌡️</div>
                                    <div class="impact-info">
                                        <div class="impact-title">温度影响</div>
                                        <div class="impact-desc">当前温度28°C，适宜户外作业</div>
                                    </div>
                                </div>
                                <div class="impact-item">
                                    <div class="impact-icon">💨</div>
                                    <div class="impact-info">
                                        <div class="impact-title">风力影响</div>
                                        <div class="impact-desc">东北风12km/h，对高空作业有轻微影响</div>
                                    </div>
                                </div>
                                <div class="impact-item">
                                    <div class="impact-icon">☀️</div>
                                    <div class="impact-info">
                                        <div class="impact-title">光照影响</div>
                                        <div class="impact-desc">晴天，光照充足，适合户外作业</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备状态模态框 -->
            <div v-if="showEquipmentStatusModal" class="modal-overlay" @click="closeEquipmentStatusModal">
                <div class="modal-content" @click.stop>
                    <div class="modal-header">
                        <h3 class="modal-title">⚙️ 设备状态监控</h3>
                        <button class="modal-close" @click="closeEquipmentStatusModal">×</button>
                    </div>

                    <div class="modal-body">
                        <!-- 设备选择 -->
                        <div class="analysis-section">
                            <div class="section-title">🔍 选择设备</div>
                            <div class="equipment-selector">
                                <select v-model="selectedEquipmentId" class="equipment-select">
                                    <option value="EQ001">EQ001 - 主生产线设备</option>
                                    <option value="EQ002">EQ002 - 包装设备</option>
                                    <option value="EQ003">EQ003 - 检测设备</option>
                                    <option value="EQ004">EQ004 - 运输设备</option>
                                </select>
                                <button @click="getEquipmentHealth" class="btn btn-primary">
                                    查看状态
                                </button>
                            </div>
                        </div>

                        <!-- 设备健康状态 -->
                        <div v-if="equipmentHealth" class="analysis-section">
                            <div class="section-title">📊 设备健康状态</div>

                            <!-- 整体健康度 -->
                            <div class="health-overview">
                                <div class="health-circle" :class="getHealthClass(equipmentHealth.overallHealth)">
                                    <div class="health-value">{{ equipmentHealth.overallHealth }}%</div>
                                    <div class="health-label">健康度</div>
                                </div>
                                <div class="health-info">
                                    <div class="health-item">
                                        <span class="health-icon">🌡️</span>
                                        <span class="health-text">温度: {{ equipmentHealth.temperature }}°C</span>
                                    </div>
                                    <div class="health-item">
                                        <span class="health-icon">📊</span>
                                        <span class="health-text">振动: {{ equipmentHealth.vibration }}%</span>
                                    </div>
                                    <div class="health-item">
                                        <span class="health-icon">🔊</span>
                                        <span class="health-text">噪音: {{ equipmentHealth.noise }}dB</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 详细指标 -->
                            <div class="health-metrics">
                                <div class="metric-row">
                                    <div class="metric-label">压力</div>
                                    <div class="metric-bar">
                                        <div class="metric-fill" :style="{ width: equipmentHealth.pressure + '%' }">
                                        </div>
                                    </div>
                                    <div class="metric-value">{{ equipmentHealth.pressure }}%</div>
                                </div>
                                <div class="metric-row">
                                    <div class="metric-label">流量</div>
                                    <div class="metric-bar">
                                        <div class="metric-fill" :style="{ width: equipmentHealth.flowRate + '%' }">
                                        </div>
                                    </div>
                                    <div class="metric-value">{{ equipmentHealth.flowRate }}%</div>
                                </div>
                                <div class="metric-row">
                                    <div class="metric-label">天气敏感度</div>
                                    <div class="metric-bar">
                                        <div class="metric-fill weather-sensitive"
                                            :style="{ width: equipmentHealth.weatherSensitivity + '%' }"></div>
                                    </div>
                                    <div class="metric-value">{{ equipmentHealth.weatherSensitivity }}%</div>
                                </div>
                            </div>

                            <!-- 维护信息 -->
                            <div class="maintenance-info">
                                <div class="section-title">🔧 维护信息</div>
                                <div class="maintenance-item">
                                    <span class="maintenance-icon">📅</span>
                                    <span class="maintenance-label">最后校准:</span>
                                    <span class="maintenance-value">{{ formatDate(equipmentHealth.lastCalibration)
                                    }}</span>
                                </div>
                                <div class="maintenance-item">
                                    <span class="maintenance-icon">⏰</span>
                                    <span class="maintenance-label">下次维护:</span>
                                    <span class="maintenance-value">{{
                                        formatDate(moment(equipmentHealth.lastCalibration).add(30,
                                            'days').format('YYYY-MM-DD')) }}</span>
                                </div>
                            </div>

                            <!-- 维护建议 -->
                            <div v-if="equipmentHealth.recommendations.length > 0" class="recommendations-section">
                                <div class="section-title">💡 维护建议</div>
                                <div class="recommendations-list">
                                    <div v-for="(rec, index) in equipmentHealth.recommendations" :key="index"
                                        class="recommendation-item">
                                        <span class="rec-number">{{ index + 1 }}</span>
                                        <span class="rec-text">{{ rec }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 安全分析模态框 -->
            <div v-if="showSafetyAnalysisModal" class="modal-overlay" @click="closeSafetyAnalysisModal">
                <div class="modal-content" @click.stop>
                    <div class="modal-header">
                        <h3 class="modal-title">🚨 安全事件分析</h3>
                        <button class="modal-close" @click="closeSafetyAnalysisModal">×</button>
                    </div>

                    <div class="modal-body">
                        <!-- 安全概览 -->
                        <div class="analysis-section">
                            <div class="section-title">📊 安全概览</div>
                            <div class="safety-overview">
                                <div class="safety-stat">
                                    <div class="stat-icon">🚨</div>
                                    <div class="stat-info">
                                        <div class="stat-value">{{ safetyIncidents.length }}</div>
                                        <div class="stat-label">总事件数</div>
                                    </div>
                                </div>
                                <div class="safety-stat">
                                    <div class="stat-icon">🌦️</div>
                                    <div class="stat-info">
                                        <div class="stat-value">{{ weatherRelatedIncidents }}</div>
                                        <div class="stat-label">天气相关</div>
                                    </div>
                                </div>
                                <div class="safety-stat">
                                    <div class="stat-icon">⚠️</div>
                                    <div class="stat-info">
                                        <div class="stat-value">{{ highSeverityIncidents }}</div>
                                        <div class="stat-label">高风险</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 最近安全事件 -->
                        <div class="analysis-section">
                            <div class="section-title">📋 最近安全事件</div>
                            <div class="incidents-list">
                                <div v-for="incident in safetyIncidents.slice(0, 5)" :key="incident.id"
                                    class="incident-item" :class="getIncidentSeverityClass(incident.severity)">
                                    <div class="incident-header">
                                        <div class="incident-type">
                                            <span class="type-icon">{{ getIncidentIcon(incident.type) }}</span>
                                            <span class="type-name">{{ incident.type }}</span>
                                        </div>
                                        <div class="incident-severity"
                                            :class="getIncidentSeverityClass(incident.severity)">
                                            {{ getIncidentSeverityText(incident.severity) }}
                                        </div>
                                    </div>

                                    <div class="incident-content">
                                        <div class="incident-location">
                                            <span class="location-icon">📍</span>
                                            <span class="location-text">{{ incident.location }}</span>
                                        </div>
                                        <div class="incident-time">
                                            <span class="time-icon">🕐</span>
                                            <span class="time-text">{{ formatDateTime(incident.occurredAt) }}</span>
                                        </div>
                                        <div class="incident-description">{{ incident.description }}</div>
                                    </div>

                                    <div class="incident-footer">
                                        <div class="weather-related" :class="{ 'related': incident.weatherRelated }">
                                            <span class="weather-icon">🌦️</span>
                                            <span class="weather-text">{{ incident.weatherRelated ? '天气相关' : '非天气相关'
                                            }}</span>
                                        </div>
                                        <div class="incident-status" :class="getIncidentStatusClass(incident.status)">
                                            {{ getIncidentStatusText(incident.status) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 安全趋势分析 -->
                        <div class="analysis-section">
                            <div class="section-title">📈 安全趋势分析</div>
                            <div class="safety-trends">
                                <div class="trend-item">
                                    <div class="trend-icon">📊</div>
                                    <div class="trend-info">
                                        <div class="trend-title">事件频率</div>
                                        <div class="trend-desc">本月安全事件较上月减少15%</div>
                                    </div>
                                </div>
                                <div class="trend-item">
                                    <div class="trend-icon">🌦️</div>
                                    <div class="trend-info">
                                        <div class="trend-title">天气影响</div>
                                        <div class="trend-desc">天气相关事件占比30%，需要加强预防</div>
                                    </div>
                                </div>
                                <div class="trend-item">
                                    <div class="trend-icon">🛡️</div>
                                    <div class="trend-info">
                                        <div class="trend-title">预防措施</div>
                                        <div class="trend-desc">已实施的安全措施有效降低风险</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实时天气监控模块 -->
            <div class="weather-section"
                style="order: -1; display: block !important; visibility: visible !important; opacity: 1 !important;">
                <h2 class="section-title">实时天气监控</h2>

                <!-- 城市选择区域 -->
                <div class="city-selector-section">
                    <div class="city-input-group">
                        <div class="input-wrapper">
                            <span class="input-icon">📍</span>
                            <input v-model="currentCity" @keyup.enter="handleCityChange(currentCity)"
                                placeholder="输入城市名称" class="city-input-field" />
                        </div>
                        <button @click="handleCityChange(currentCity)" class="city-search-btn">
                            <span class="btn-icon">🔍</span>
                            查询
                        </button>
                    </div>
                    <div class="current-time">{{ formatDateTime(new Date()) }}</div>
                </div>

                <!-- 主要天气信息卡片 -->
                <div class="main-weather-card">
                    <div class="weather-left">
                        <div class="weather-icon-large">
                            {{ getWeatherIcon(currentWeatherData?.current?.text || '晴天') }}
                        </div>
                        <div class="temperature-display">
                            <span class="temp-value">{{ currentWeatherData?.current?.temp || '--' }}</span>
                            <span class="temp-unit">°C</span>
                        </div>
                        <div class="weather-description">
                            <div class="feels-like">体感温度: {{ getFeelsLikeTemp(currentWeatherData?.current?.temp || 0)
                                }}°C</div>
                            <div class="weather-text">{{ currentWeatherData?.current?.text || '晴天' }}</div>
                        </div>
                    </div>

                    <div class="weather-right">
                        <div class="weather-details-grid">
                            <div class="detail-item">
                                <span class="detail-icon">💧</span>
                                <span class="detail-label">湿度</span>
                                <span class="detail-value">{{ currentWeatherData?.current?.humidity || '--' }}%</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-icon">💨</span>
                                <span class="detail-label">风速</span>
                                <span class="detail-value">{{ currentWeatherData?.current?.windSpeed || '--' }}
                                    m/s</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-icon">🧭</span>
                                <span class="detail-label">风向</span>
                                <span class="detail-value">{{ currentWeatherData?.current?.windDir || '--' }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-icon">📊</span>
                                <span class="detail-label">气压</span>
                                <span class="detail-value">{{ currentWeatherData?.current?.pressure || '--' }}
                                    hPa</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-icon">👁️</span>
                                <span class="detail-label">能见度</span>
                                <span class="detail-value">{{ currentWeatherData?.current?.vis || '--' }} km</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 天气指数和生活建议 -->
                <div class="weather-indices-section">
                    <div class="indices-row">
                        <div class="index-card">
                            <div class="index-icon">☀️</div>
                            <div class="index-title">紫外线指数</div>
                            <div class="index-value">{{ enhancedWeatherData?.UVIndex?.Index || '--' }}</div>
                            <div class="index-level">{{ enhancedWeatherData?.UVIndex?.Level || '暂无数据' }}</div>
                        </div>
                        <div class="index-card">
                            <div class="index-icon">😊</div>
                            <div class="index-title">舒适度</div>
                            <div class="index-value">{{ enhancedWeatherData?.LifeIndices?.Comfort || '--' }}</div>
                            <div class="index-level">舒适</div>
                        </div>
                        <div class="index-card">
                            <div class="index-icon">🌬️</div>
                            <div class="index-title">空气质量</div>
                            <div class="index-value">{{ enhancedWeatherData?.AirQuality?.AQI || '--' }}</div>
                            <div class="index-level">{{ enhancedWeatherData?.AirQuality?.Level || '暂无数据' }}</div>
                        </div>
                    </div>

                    <div class="life-suggestions-row">
                        <div class="suggestion-card">
                            <div class="suggestion-icon">👕</div>
                            <div class="suggestion-title">穿衣建议</div>
                            <div class="suggestion-text">{{ enhancedWeatherData?.LifeIndices?.Clothing || '暂无建议' }}
                            </div>
                        </div>
                        <div class="suggestion-card">
                            <div class="suggestion-icon">🏃</div>
                            <div class="suggestion-title">运动建议</div>
                            <div class="suggestion-text">{{ enhancedWeatherData?.LifeIndices?.Exercise || '暂无建议' }}
                            </div>
                        </div>
                        <div class="suggestion-card">
                            <div class="suggestion-icon">☂️</div>
                            <div class="suggestion-title">雨伞建议</div>
                            <div class="suggestion-text">{{ enhancedWeatherData?.LifeIndices?.Umbrella || '暂无建议' }}
                            </div>
                        </div>
                        <div class="suggestion-card">
                            <div class="suggestion-icon">🚗</div>
                            <div class="suggestion-title">洗车建议</div>
                            <div class="suggestion-text">{{ enhancedWeatherData?.LifeIndices?.CarWash || '暂无建议' }}</div>
                        </div>
                    </div>
                </div>

                <!-- 7天预报 -->
                <div class="forecast-section">
                    <div class="forecast-header">
                        <h3 class="forecast-title">7天预报</h3>
                    </div>
                    <div class="forecast-cards">
                        <div v-for="(day, index) in currentWeatherData?.forecast?.slice(0, 7)" :key="index"
                            class="forecast-day-card" @click="showDayDetail(day, index)">
                            <div class="forecast-date">{{ formatDate(day.date) }}</div>
                            <div class="forecast-weather-icon">{{ getWeatherIcon(day.text) }}</div>
                            <div class="forecast-weather-text">{{ day.text }}</div>
                            <div class="forecast-temp">
                                <span class="temp-high">{{ day.maxTemp }}°</span>
                                <span class="temp-separator">/</span>
                                <span class="temp-low">{{ day.minTemp }}°</span>
                            </div>
                            <div class="forecast-wind">{{ day.windDir }}</div>
                            <div class="forecast-humidity">{{ day.humidity }}%</div>
                            <div class="forecast-hint">点击查看详情</div>
                        </div>
                    </div>
                </div>

                <!-- 详细天气信息模态框 -->
                <div v-if="showDayDetailModal" class="modal-overlay" @click="closeDayDetailModal">
                    <div class="modal-content" @click.stop>
                        <div class="modal-header">
                            <h3 class="modal-title">🌤️ {{ selectedDayDetail?.date ? formatDate(selectedDayDetail.date)
                                : '' }} 详细天气</h3>
                            <button class="modal-close" @click="closeDayDetailModal">×</button>
                        </div>

                        <div class="modal-body">
                            <!-- 日期信息 -->
                            <div class="day-info-section">
                                <div class="day-header">
                                    <div class="day-icon">{{ getWeatherIcon(selectedDayDetail?.text || '') }}</div>
                                    <div class="day-info">
                                        <div class="day-name">{{ selectedDayDetail?.date ?
                                            formatDayName(selectedDayDetail.date) : '' }}</div>
                                        <div class="day-date">{{ selectedDayDetail?.date ?
                                            formatDate(selectedDayDetail.date) : '' }}</div>
                                    </div>
                                </div>
                                <div class="day-weather">
                                    <div class="weather-main-info">{{ selectedDayDetail?.text || '' }}</div>
                                    <div class="temperature-range">
                                        <span class="temp-high">{{ selectedDayDetail?.maxTemp || 0 }}°C</span>
                                        <span class="temp-separator">/</span>
                                        <span class="temp-low">{{ selectedDayDetail?.minTemp || 0 }}°C</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 24小时详细预报 -->
                            <div class="hourly-forecast-section">
                                <div class="section-title">⏰ 24小时详细预报</div>
                                <div class="hourly-grid">
                                    <div v-for="hour in hourlyForecast" :key="hour.time" class="hourly-item">
                                        <div class="hour-time">{{ hour.time }}</div>
                                        <div class="hour-icon">{{ hour.icon }}</div>
                                        <div class="hour-temp">{{ hour.temp }}°</div>
                                        <div class="hour-weather">{{ hour.weather }}</div>
                                        <div class="hour-details">
                                            <div class="detail-row">
                                                <span class="detail-label">湿度:</span>
                                                <span class="detail-value">{{ hour.humidity }}%</span>
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">风速:</span>
                                                <span class="detail-value">{{ hour.windSpeed }}km/h</span>
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">降水:</span>
                                                <span class="detail-value">{{ hour.precipitation }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 生产影响分析 -->
                            <div class="production-impact-section">
                                <div class="section-title">🏭 生产影响分析</div>
                                <div class="impact-summary">
                                    <div class="impact-item">
                                        <div class="impact-icon">🌡️</div>
                                        <div class="impact-info">
                                            <div class="impact-title">温度影响</div>
                                            <div class="impact-desc">{{ getTemperatureImpact(selectedDayDetail?.maxTemp
                                                || 0) }}</div>
                                        </div>
                                    </div>
                                    <div class="impact-item">
                                        <div class="impact-icon">💧</div>
                                        <div class="impact-info">
                                            <div class="impact-title">降水影响</div>
                                            <div class="impact-desc">{{ getPrecipitationImpact(selectedDayDetail?.text
                                                || '') }}</div>
                                        </div>
                                    </div>
                                    <div class="impact-item">
                                        <div class="impact-icon">💨</div>
                                        <div class="impact-info">
                                            <div class="impact-title">风力影响</div>
                                            <div class="impact-desc">{{ getWindImpact(selectedDayDetail?.windSpeed || 0)
                                            }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 生产建议 -->
                            <div class="production-recommendations-section">
                                <div class="section-title">💡 生产建议</div>
                                <div class="recommendations-list">
                                    <div v-for="(rec, index) in getProductionRecommendations(selectedDayDetail)"
                                        :key="index" class="recommendation-item">
                                        <span class="rec-number">{{ index + 1 }}</span>
                                        <span class="rec-text">{{ rec }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 多城市天气对比 -->
            <div class="cities-section">
                <h2 class="section-title">多城市天气对比</h2>
                <EnhancedWeatherDisplay />
            </div>

            <!-- 天气趋势图表 -->
            <div class="trends-section">
                <h2 class="section-title">天气趋势分析</h2>
                <WeatherTrendChart :key="weatherDataArray.length" :weather-data="weatherDataArray" />
            </div>

            <!-- 天气预警通知 -->
            <div class="alerts-section">
                <h2 class="section-title">天气预警管理</h2>
                <WeatherAlertNotification />
            </div>

            <!-- 生产预警区域 -->
            <div class="production-alerts">
                <div class="section-header">
                    <h2 class="section-title">生产预警管理</h2>
                    <div class="alerts-summary">
                        <span class="alerts-count">{{ productionAlerts.length }} 个预警</span>
                        <span class="alerts-status" :class="getOverallAlertStatus()">
                            {{ getOverallAlertStatusText() }}
                        </span>
                    </div>
                </div>

                <div class="alerts-content">
                    <div v-if="productionAlerts.length > 0" class="alerts-list">
                        <div v-for="alert in productionAlerts" :key="alert.id" class="alert-item" :class="alert.level">
                            <div class="alert-header">
                                <div class="alert-level">
                                    <span class="level-badge" :class="alert.level">
                                        {{ getAlertLevelText(alert.level) }}
                                    </span>
                                    <span class="alert-type">{{ alert.type }}</span>
                                </div>
                                <span class="alert-time">{{ formatDateTime(alert.timestamp) }}</span>
                            </div>

                            <div class="alert-content">
                                <h4 class="alert-title">{{ alert.title }}</h4>
                                <p class="alert-description">{{ alert.description }}</p>
                            </div>

                            <div class="alert-actions">
                                <button @click="markAsProcessed(alert.id)" class="btn btn-outline">
                                    标记已处理
                                </button>
                                <button @click="viewAlertDetails(alert)" class="btn btn-text">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>

                    <div v-else class="no-alerts">
                        <div class="no-alerts-icon">✅</div>
                        <h3 class="no-alerts-title">暂无生产预警</h3>
                        <p class="no-alerts-text">当前生产环境运行正常</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import WeatherDisplay from '@/components/WeatherDisplay.vue'
import EnhancedWeatherDisplay from '@/components/EnhancedWeatherDisplay.vue'
import WeatherTrendChart from '@/components/WeatherTrendChart.vue'
import WeatherAlertNotification from '@/components/WeatherAlertNotification.vue'
import WeatherService from '@/services/weatherService'
import moment from 'moment'

// 响应式数据
const currentWeatherData = ref<any>(null)
const enhancedWeatherData = ref<any>(null)
const weatherDataArray = ref<any[]>([])
const productionAlerts = ref<any[]>([])
const currentCity = ref('北京')

// 模态框状态
const showWeatherAnalysisModal = ref(false)
const showProductionOverviewModal = ref(false)
const showEquipmentStatusModal = ref(false)
const showSafetyAnalysisModal = ref(false)
const showDayDetailModal = ref(false)
const selectedDayDetail = ref<any>(null)
const hourlyForecast = ref<any[]>([])

// 天气分析相关数据
const analysisCity = ref('北京')
const selectedActivityType = ref('户外作业')
const weatherImpactAnalysis = ref<any>(null)
const weatherTrends = ref<any[]>([])

// 生产概览相关数据
const productionDashboard = ref<any>(null)

// 设备状态相关数据
const selectedEquipmentId = ref('EQ001')
const equipmentHealth = ref<any>(null)

// 安全分析相关数据
const safetyIncidents = ref<any[]>([])
const weatherRelatedIncidents = ref(0)
const highSeverityIncidents = ref(0)

// 生命周期
onMounted(async () => {
    await initializeData()
})

// 初始化数据
const initializeData = async () => {
    try {
        // 获取增强版天气信息
        const enhancedWeather = await WeatherService.getEnhancedWeather('北京')
        console.log('获取到的增强版天气数据:', enhancedWeather)

        // 注意：API返回的是小写的 basicWeather
        currentWeatherData.value = enhancedWeather.basicWeather || enhancedWeather.BasicWeather
        enhancedWeatherData.value = enhancedWeather

        console.log('设置后的 currentWeatherData:', currentWeatherData.value)

        // 获取多城市天气对比
        const multiCityWeather = await WeatherService.getMultiCityWeather(['北京', '上海', '广州', '杭州'])
        console.log('获取到的多城市天气数据:', multiCityWeather)

        // 注意：API返回的是小写的 weatherData
        weatherDataArray.value = multiCityWeather.map(city => city.weatherData || city.WeatherData)

        console.log('设置后的 weatherDataArray:', weatherDataArray.value)

        // 获取7天预报数据
        try {
            const forecastData = await WeatherService.getWeatherForecast('北京')
            console.log('获取到的7天预报数据:', forecastData)

            if (forecastData && forecastData.length > 0) {
                // 将后端数据格式转换为前端期望的格式
                const formattedForecast = forecastData.map((day: any) => ({
                    date: day.date,
                    text: day.weather, // 后端返回weather，前端期望text
                    maxTemp: day.maxTemp,
                    minTemp: day.minTemp,
                    windDir: day.windDir,
                    windSpeed: day.windSpeed,
                    humidity: day.humidity,
                    precip: 0, // 后端没有这个字段，设为默认值
                    pressure: day.pressure,
                    visibility: day.visibility,
                    sunrise: day.sunrise,
                    sunset: day.sunset
                }))

                console.log('格式化后的预报数据:', formattedForecast)

                // 更新预报数据
                currentWeatherData.value = {
                    ...currentWeatherData.value,
                    forecast: formattedForecast
                }
                console.log('更新后的预报数据:', currentWeatherData.value.forecast)
            } else {
                console.log('预报数据为空或格式不正确')
            }
        } catch (forecastError) {
            console.error('获取7天预报失败:', forecastError)
            // 预报获取失败不影响其他功能
        }

        // 生成模拟生产预警
        generateProductionAlerts()

        // 初始化其他数据
        initializeMockData()

        // 确保天气趋势分析有数据
        if (weatherDataArray.value.length === 0) {
            console.log('天气数据为空，生成模拟数据用于趋势分析...')
            generateMockWeatherDataForTrends()
        }

        // 强制触发趋势图表重新渲染
        console.log('天气数据加载完成，触发趋势图表重新渲染...')
        await nextTick()
        // 添加一个小延迟确保组件完全更新
        setTimeout(() => {
            console.log('趋势图表应该已经更新完成')
        }, 100)
    } catch (error) {
        console.error('初始化数据失败:', error)
        console.log('使用模拟数据...')

        // 如果API调用失败，使用模拟数据
        const mockWeatherData = {
            city: '北京',
            current: {
                temp: 25,
                text: '晴天',
                humidity: 60,
                windSpeed: 3,
                windDir: '东北风',
                pressure: 1013,
                vis: 10
            },
            forecast: [
                {
                    date: new Date().toISOString(),
                    text: '晴天',
                    maxTemp: 28,
                    minTemp: 18,
                    windDir: '东北风',
                    windSpeed: 3,
                    humidity: 60,
                    precip: 0
                }
            ],
            lastUpdated: new Date().toISOString()
        }

        currentWeatherData.value = mockWeatherData
        weatherDataArray.value = [mockWeatherData]

        // 生成模拟天气趋势数据
        generateMockWeatherDataForTrends()

        // 创建模拟的增强版数据
        enhancedWeatherData.value = {
            BasicWeather: mockWeatherData,
            AirQuality: {
                AQI: 45,
                Level: '优',
                PM25: 15,
                PM10: 25,
                NO2: 20,
                SO2: 8,
                CO: 800,
                O3: 45
            },
            UVIndex: {
                Index: 3,
                Level: '中等',
                Risk: '中等风险',
                ProtectionAdvice: '建议涂抹防晒霜'
            },
            LifeIndices: {
                Clothing: '建议着短袖、短裙、短裤等清凉衣物',
                Exercise: '天气适宜，非常适合户外运动',
                Umbrella: '无需携带雨伞',
                CarWash: '较适宜洗车',
                Comfort: '舒适',
                Travel: '天气晴好，适合出行，注意防晒'
            },
            WeatherTrends: {
                TemperatureTrend: '相对稳定',
                HumidityTrend: '相对稳定',
                WindSpeedTrend: '相对稳定',
                ChangeAmplitude: '变化很小',
                PredictionAdvice: '天气相对稳定，可正常安排活动'
            },
            Alerts: []
        }

        generateProductionAlerts()
        initializeMockData()
    }
}

// 初始化模拟数据
const initializeMockData = () => {
    // 初始化生产概览数据
    productionDashboard.value = {
        productionEfficiency: 87,
        qualityRate: 94,
        safetyScore: 91,
        runningEquipment: 23,
        totalEquipment: 25,
        completedOrders: 89,
        pendingOrders: 12,
        delayedOrders: 3,
        activeWorkers: 67,
        onBreakWorkers: 8,
        totalWorkers: 75
    }

    // 初始化安全事件数据
    safetyIncidents.value = [
        {
            id: '1',
            type: '设备故障',
            severity: '警告',
            location: '生产线区域',
            occurredAt: moment().subtract(1, 'hour').format('YYYY-MM-DD HH:mm'),
            description: '设备在运行过程中出现异常，需要及时维护。',
            weatherRelated: false,
            status: '待处理'
        },
        {
            id: '2',
            type: '人员受伤',
            severity: '危险',
            location: '包装区域',
            occurredAt: moment().subtract(2, 'hours').format('YYYY-MM-DD HH:mm'),
            description: '一名员工在操作设备时受伤，已送往医院。',
            weatherRelated: false,
            status: '紧急'
        },
        {
            id: '3',
            type: '环境污染',
            severity: '信息',
            location: '仓库',
            occurredAt: moment().subtract(3, 'hours').format('YYYY-MM-DD HH:mm'),
            description: '发现轻微的环境污染问题，已采取措施。',
            weatherRelated: true,
            status: '已处理'
        }
    ]
    weatherRelatedIncidents.value = safetyIncidents.value.filter(incident => incident.weatherRelated).length
    highSeverityIncidents.value = safetyIncidents.value.filter(incident => incident.severity === '危险').length
}

// 生成模拟天气数据用于趋势分析
const generateMockWeatherDataForTrends = () => {
    const cities = ['北京', '上海', '广州', '杭州']
    const mockData = cities.map(city => ({
        city: city,
        weatherData: {
            city: city,
            current: {
                temp: Math.floor(Math.random() * 20) + 15, // 15-35度
                text: '晴天',
                humidity: Math.floor(Math.random() * 30) + 50, // 50-80%
                windSpeed: Math.floor(Math.random() * 10) + 2, // 2-12 m/s
                windDir: '东北风',
                pressure: 1013,
                vis: 10
            },
            forecast: Array.from({ length: 7 }, (_, i) => ({
                date: moment().add(i, 'days').format('YYYY-MM-DD'),
                text: '晴天',
                maxTemp: Math.floor(Math.random() * 15) + 20, // 20-35度
                minTemp: Math.floor(Math.random() * 10) + 10, // 10-20度
                windDir: '东北风',
                windSpeed: Math.floor(Math.random() * 10) + 2,
                humidity: Math.floor(Math.random() * 30) + 50,
                precip: 0
            })),
            lastUpdated: new Date().toISOString()
        }
    }))

    weatherDataArray.value = mockData.map(city => city.weatherData)
    console.log('生成的模拟天气趋势数据:', weatherDataArray.value)
}

// 生成模拟生产预警
const generateProductionAlerts = () => {
    productionAlerts.value = [
        {
            id: '1',
            level: 'warning',
            type: '天气影响',
            title: '大风天气影响户外作业',
            description: '当前风力较大，建议暂停户外高空作业，确保安全。',
            timestamp: new Date()
        },
        {
            id: '2',
            level: 'info',
            type: '设备维护',
            title: '设备定期维护提醒',
            description: '根据天气情况，建议对户外设备进行防雨防潮检查。',
            timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000)
        }
    ]
}

// 模态框控制
const showWeatherAnalysis = () => {
    showWeatherAnalysisModal.value = true
    analysisCity.value = '北京'
    selectedActivityType.value = '户外作业'
    weatherImpactAnalysis.value = null
    weatherTrends.value = []
}

const closeWeatherAnalysisModal = () => {
    showWeatherAnalysisModal.value = false
}

const showProductionOverview = () => {
    showProductionOverviewModal.value = true
}

const closeProductionOverviewModal = () => {
    showProductionOverviewModal.value = false
}

const showEquipmentStatus = () => {
    showEquipmentStatusModal.value = true
}

const closeEquipmentStatusModal = () => {
    showEquipmentStatusModal.value = false
}

const showSafetyAnalysis = () => {
    showSafetyAnalysisModal.value = true
}

const closeSafetyAnalysisModal = () => {
    showSafetyAnalysisModal.value = false
}

// 天气分析相关方法
const analyzeWeatherImpact = async () => {
    if (!analysisCity.value.trim()) return

    try {
        // 模拟获取天气影响分析数据
        weatherImpactAnalysis.value = {
            city: analysisCity.value,
            activityType: selectedActivityType.value,
            currentWeather: {
                temp: 28,
                text: '晴天',
                humidity: 71,
                windSpeed: 12,
                windDir: '东北风'
            },
            riskLevel: '中等风险',
            recommendations: [
                '当前天气适宜户外作业',
                '注意防晒，准备遮阳设备',
                '保持充足水分补充',
                '定期休息，避免中暑'
            ],
            alerts: [
                {
                    id: '1',
                    severity: '信息',
                    activityName: '户外作业',
                    impact: '天气适宜，可正常进行户外作业'
                }
            ]
        }

        // 模拟获取历史趋势数据
        weatherTrends.value = [
            { date: moment().subtract(1, 'day').format('YYYY-MM-DD'), temperatureChange: 2, riskIncrease: 10 },
            { date: moment().subtract(2, 'days').format('YYYY-MM-DD'), temperatureChange: -1, riskIncrease: 5 },
            { date: moment().subtract(3, 'days').format('YYYY-MM-DD'), temperatureChange: 3, riskIncrease: 15 },
            { date: moment().subtract(4, 'days').format('YYYY-MM-DD'), temperatureChange: -2, riskIncrease: 8 },
            { date: moment().subtract(5, 'days').format('YYYY-MM-DD'), temperatureChange: 1, riskIncrease: 12 },
        ]
    } catch (error) {
        console.error('获取天气影响分析失败:', error)
    }
}

const getRiskLevelClass = (level: string) => {
    switch (level) {
        case '低风险':
            return 'low-risk'
        case '中等风险':
            return 'medium-risk'
        case '高风险':
            return 'high-risk'
        default:
            return ''
    }
}

const getRiskLevelText = (level: string) => {
    return level || '未知风险'
}

const getAlertSeverityClass = (severity: string) => {
    switch (severity) {
        case '信息':
            return 'info'
        case '警告':
            return 'warning'
        case '危险':
            return 'danger'
        default:
            return ''
    }
}

const getAlertSeverityText = (severity: string) => {
    return severity || '未知预警'
}

const getTrendIconClass = (change: number) => {
    if (change > 0) return 'up'
    if (change < 0) return 'down'
    return ''
}

const getTrendIcon = (change: number) => {
    if (change > 0) return '↑'
    if (change < 0) return '↓'
    return '→'
}

// 设备状态相关方法
const getEquipmentHealth = async () => {
    try {
        // 模拟获取设备健康状态数据
        equipmentHealth.value = {
            id: selectedEquipmentId.value,
            name: selectedEquipmentId.value.replace('EQ', ''),
            overallHealth: 95, // 95%
            temperature: 30,
            vibration: 80,
            noise: 65,
            pressure: 90,
            flowRate: 85,
            weatherSensitivity: 92,
            lastCalibration: moment().subtract(10, 'days').format('YYYY-MM-DD'),
            recommendations: [
                '设备运行正常，无需立即维护',
                '建议定期检查设备连接',
                '注意观察温度变化'
            ]
        }
    } catch (error) {
        console.error('获取设备健康状态失败:', error)
    }
}

const getHealthClass = (health: number) => {
    if (health >= 90) return 'excellent'
    if (health >= 70) return 'good'
    if (health >= 50) return 'fair'
    return 'poor'
}

// 生产预警相关方法
const markAsProcessed = (alertId: string) => {
    productionAlerts.value = productionAlerts.value.filter(alert => alert.id !== alertId)
}

const viewAlertDetails = (alert: any) => {
    console.log('查看预警详情:', alert)
}

const getOverallAlertStatus = () => {
    if (productionAlerts.value.length === 0) return 'normal'
    const hasWarning = productionAlerts.value.some(alert => alert.level === 'warning')
    const hasDanger = productionAlerts.value.some(alert => alert.level === 'danger')

    if (hasDanger) return 'danger'
    if (hasWarning) return 'warning'
    return 'normal'
}

const getOverallAlertStatusText = () => {
    const status = getOverallAlertStatus()
    const statusMap = {
        'normal': '正常',
        'warning': '注意',
        'danger': '危险'
    }
    return statusMap[status as keyof typeof statusMap] || '正常'
}

const getAlertLevelText = (level: string) => {
    const levelMap = {
        'info': '信息',
        'warning': '警告',
        'danger': '危险'
    }
    return levelMap[level as keyof typeof levelMap] || '信息'
}

// 安全分析相关方法
const getIncidentSeverityClass = (severity: string) => {
    switch (severity) {
        case '信息':
            return 'info'
        case '警告':
            return 'warning'
        case '危险':
            return 'danger'
        default:
            return ''
    }
}

const getIncidentSeverityText = (severity: string) => {
    return severity || '未知事件'
}

const getIncidentIcon = (type: string) => {
    const iconMap: Record<string, string> = {
        '设备故障': '⚙️',
        '人员受伤': '👥',
        '环境污染': '🌳',
        '火灾': '🔥',
        '化学品泄漏': '⚗️'
    }
    return iconMap[type] || '❓'
}

const getIncidentStatusClass = (status: string) => {
    switch (status) {
        case '已处理':
            return 'resolved'
        case '待处理':
            return 'pending'
        case '紧急':
            return 'urgent'
        default:
            return ''
    }
}

const getIncidentStatusText = (status: string) => {
    return status || '未知状态'
}

// 处理城市切换
const handleCityChange = async (city: string) => {
    try {
        console.log(`切换到城市: ${city}`)
        // 获取新城市的增强版天气信息
        const enhancedWeather = await WeatherService.getEnhancedWeather(city)
        currentWeatherData.value = enhancedWeather.basicWeather || enhancedWeather.BasicWeather
        enhancedWeatherData.value = enhancedWeather

        // 更新多城市天气数组
        weatherDataArray.value = [currentWeatherData.value]

        console.log(`成功切换到城市 ${city}`)
    } catch (error) {
        console.error(`切换城市 ${city} 失败:`, error)
        // 可以在这里添加错误提示
    }
}

// 工具方法
const formatDateTime = (date: Date) => {
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    })
}

// 天气相关方法
const getWeatherIcon = (weather: string) => {
    const iconMap: Record<string, string> = {
        '晴天': '☀️',
        '多云': '⛅',
        '阴天': '☁️',
        '小雨': '🌦️',
        '中雨': '🌧️',
        '大雨': '⛈️',
        '暴雨': '🌩️',
        '小雪': '🌨️',
        '中雪': '❄️',
        '大雪': '⛄',
        '雾': '🌫️',
        '霾': '😷',
        '沙尘暴': '🌪️'
    }
    return iconMap[weather] || '☀️'
}

const getFeelsLikeTemp = (temp: number) => {
    // 简单的体感温度计算
    return Math.round(temp + (Math.random() * 4 - 2))
}

// 详细天气相关方法
const showDayDetail = async (day: any, index: number) => {
    selectedDayDetail.value = day
    showDayDetailModal.value = true

    try {
        // 尝试从API获取详细预报
        const detailedForecast = await WeatherService.getDailyDetailedForecast(currentCity.value, day.date)
        if (detailedForecast && detailedForecast.hourlyForecast) {
            hourlyForecast.value = detailedForecast.hourlyForecast
        } else {
            // 如果API没有返回小时预报，使用模拟数据
            generateHourlyForecast(day)
        }
    } catch (error) {
        console.error('获取详细预报失败，使用模拟数据:', error)
        // 使用模拟数据
        generateHourlyForecast(day)
    }
}

const closeDayDetailModal = () => {
    showDayDetailModal.value = false
    selectedDayDetail.value = null
}

const generateHourlyForecast = (day: any) => {
    const hours = []
    for (let i = 0; i < 24; i++) {
        const hour = i.toString().padStart(2, '0') + ':00'
        const temp = Math.floor(Math.random() * (day.maxTemp - day.minTemp + 1)) + day.minTemp
        const humidity = Math.floor(Math.random() * 40) + 40
        const windSpeed = Math.floor(Math.random() * 20) + 5
        const precipitation = Math.floor(Math.random() * 100)

        hours.push({
            time: hour,
            icon: getWeatherIcon(day.text),
            temp: temp,
            weather: day.text,
            humidity: humidity,
            windSpeed: windSpeed,
            precipitation: precipitation
        })
    }
    hourlyForecast.value = hours
}

const formatDayName = (date: string) => {
    const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    return dayNames[new Date(date).getDay()]
}

const getTemperatureImpact = (temp: number) => {
    if (temp > 35) return '高温天气，严重影响户外作业，建议暂停'
    if (temp > 30) return '温度较高，建议调整作业时间，避开正午'
    if (temp < 5) return '低温天气，注意防寒保暖，检查设备防冻'
    if (temp < 0) return '严寒天气，暂停户外作业，加强保暖措施'
    return '温度适宜，可正常进行户外作业'
}

const getPrecipitationImpact = (weather: string) => {
    if (weather.includes('雨') || weather.includes('雪')) {
        return '降水天气，暂停户外作业，注意防滑防摔'
    }
    return '无降水，适合户外作业'
}

const getWindImpact = (windSpeed: number) => {
    if (windSpeed > 20) return '大风天气，暂停高空作业，注意安全'
    if (windSpeed > 15) return '风力较大，注意高空作业安全'
    if (windSpeed > 10) return '风力适中，可正常作业'
    return '风力较小，适合各种作业'
}

const getProductionRecommendations = (day: any) => {
    const recommendations = []

    if (day?.maxTemp > 35) {
        recommendations.push('暂停户外作业，避免中暑')
        recommendations.push('调整工作时间至早晚凉爽时段')
        recommendations.push('增加员工休息频率')
    } else if (day?.maxTemp < 5) {
        recommendations.push('加强保暖防护装备')
        recommendations.push('检查设备防冻状态')
        recommendations.push('选择温度相对较高的时段作业')
    }

    if (day?.text?.includes('雨') || day?.text?.includes('雪')) {
        recommendations.push('暂停户外高风险作业')
        recommendations.push('加强货物防护和运输安全')
        recommendations.push('准备应急响应预案')
    }

    if (day?.windSpeed > 15) {
        recommendations.push('暂停高空作业')
        recommendations.push('加强安全防护措施')
        recommendations.push('注意设备稳定性')
    }

    if (recommendations.length === 0) {
        recommendations.push('天气适宜，可正常进行生产活动')
        recommendations.push('保持常规安全措施')
        recommendations.push('定期检查设备状态')
    }

    return recommendations
}
</script>

<style scoped>
.enhanced-weather-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.top-navbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.title-icon {
    font-size: 2rem;
}

.system-status {
    display: flex;
    gap: 20px;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.status-label {
    font-size: 0.8rem;
    opacity: 0.8;
}

.status-value {
    font-weight: 600;
    font-size: 0.9rem;
}

.status-value.online {
    color: #4CAF50;
}

.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 快速操作卡片 */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.action-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.action-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.action-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.action-desc {
    color: #666;
    font-size: 0.9rem;
}

/* 区域标题 */
.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    letter-spacing: 1px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 各个区域 */
.weather-section,
.cities-section,
.trends-section,
.alerts-section {
    margin-bottom: 40px;
}

/* 确保实时天气监控模块在最前面显示 */
.weather-section {
    order: -1;
    margin-bottom: 40px;
}

/* 实时天气监控模块样式 */
.city-selector-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    color: white;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}

.city-input-group {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.input-wrapper {
    position: relative;
    flex: 1;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #667eea;
}

.city-input-field {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.city-input-field:focus {
    outline: none;
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.city-search-btn {
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.city-search-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-icon {
    font-size: 1.1rem;
}

.current-time {
    font-size: 0.9rem;
    opacity: 0.8;
    text-align: center;
}

.main-weather-card {
    background: white;
    border-radius: 25px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 30px;
    align-items: center;
}

.weather-left {
    flex: 1;
    text-align: center;
}

.weather-icon-large {
    font-size: 6rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.temperature-display {
    margin-bottom: 20px;
}

.temp-value {
    font-size: 4rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.temp-unit {
    font-size: 2rem;
    font-weight: 600;
    color: #64748b;
    margin-left: 5px;
}

.weather-description {
    color: #64748b;
}

.feels-like {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #94a3b8;
}

.weather-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #475569;
}

.weather-right {
    flex: 1;
}

.weather-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.detail-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.detail-icon {
    font-size: 2rem;
}

.detail-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.detail-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

.weather-indices-section {
    margin-bottom: 25px;
}

.indices-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.index-card {
    background: white;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.index-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.index-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.index-title {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 10px;
    font-weight: 500;
}

.index-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.index-level {
    font-size: 0.9rem;
    color: #10b981;
    font-weight: 600;
}

.life-suggestions-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.suggestion-card {
    background: white;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.suggestion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.suggestion-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.suggestion-title {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 10px;
    font-weight: 500;
}

.suggestion-text {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.4;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forecast-section {
    background: white;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.forecast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.forecast-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.view-details-btn {
    padding: 12px 24px;
    border: 2px solid #667eea;
    border-radius: 12px;
    background: transparent;
    color: #667eea;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.view-details-btn:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
}

.forecast-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}

.forecast-day-card {
    background: #f8fafc;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.forecast-day-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.forecast-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 10px;
    font-weight: 500;
}

.forecast-weather-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.forecast-weather-text {
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 15px;
    font-weight: 500;
}

.forecast-temp {
    margin-bottom: 10px;
}

.temp-high {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ef4444;
}

.temp-separator {
    margin: 0 5px;
    color: #94a3b8;
}

.temp-low {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
}

.forecast-wind {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 5px;
}

.forecast-humidity {
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 600;
}

.forecast-hint {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.forecast-day-card:hover .forecast-hint {
    opacity: 1;
    color: #1e40af;
}

/* 详细天气信息模态框样式 */
.day-info-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 2rem;
    color: white;
    margin-bottom: 2rem;
    text-align: center;
}

.day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.day-icon {
    font-size: 3rem;
}

.day-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.day-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.day-date {
    font-size: 1.1rem;
    opacity: 0.9;
}

.day-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.weather-main-info {
    font-size: 1.8rem;
    font-weight: 600;
}

.temperature-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.temp-high {
    font-weight: 700;
}

.temp-separator {
    opacity: 0.7;
}

.temp-low {
    opacity: 0.8;
}

/* 24小时预报样式 */
.hourly-forecast-section {
    margin-bottom: 2rem;
}

.hourly-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.hourly-item {
    background: #f8fafc;
    border-radius: 16px;
    padding: 1rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hourly-item:hover {
    transform: translateY(-3px);
    border-color: #1e40af;
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.15);
}

.hour-time {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.hour-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.hour-temp {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 0.5rem;
}

.hour-weather {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.hour-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #64748b;
}

.detail-label {
    opacity: 0.8;
}

.detail-value {
    font-weight: 600;
    color: #1e293b;
}

/* 生产影响分析样式 */
.production-impact-section {
    margin-bottom: 2rem;
}

.impact-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.impact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f8fafc;
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
}

.impact-icon {
    font-size: 2rem;
    color: #1e40af;
}

.impact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.impact-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.impact-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.4;
}

/* 生产建议样式 */
.production-recommendations-section {
    margin-bottom: 1rem;
}

.production-recommendations-section .recommendations-list {
    margin-top: 1rem;
}

.production-recommendations-section .recommendation-item {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid #1e40af;
}

.production-recommendations-section .rec-number {
    background: #1e40af;
    color: white;
}

.production-recommendations-section .rec-text {
    color: #1e293b;
    font-weight: 500;
}

/* 生产预警区域 */
.production-alerts {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.alerts-summary {
    display: flex;
    align-items: center;
    gap: 15px;
}

.alerts-count {
    font-size: 0.9rem;
    color: #666;
}

.alerts-status {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.alerts-status.normal {
    background: #d4edda;
    color: #155724;
}

.alerts-status.warning {
    background: #fff3cd;
    color: #856404;
}

.alerts-status.danger {
    background: #f8d7da;
    color: #721c24;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.alert-item {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
}

.alert-item:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.alert-item.warning {
    border-left: 4px solid #ffc107;
}

.alert-item.info {
    border-left: 4px solid #17a2b8;
}

.alert-item.danger {
    border-left: 4px solid #dc3545;
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.alert-level {
    display: flex;
    align-items: center;
    gap: 10px;
}

.level-badge {
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.level-badge.warning {
    background: #ffc107;
    color: #333;
}

.level-badge.info {
    background: #17a2b8;
}

.level-badge.danger {
    background: #dc3545;
}

.alert-type {
    font-size: 0.9rem;
    color: #666;
}

.alert-time {
    font-size: 0.8rem;
    color: #999;
}

.alert-content {
    margin-bottom: 15px;
}

.alert-title {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1.1rem;
}

.alert-description {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

.alert-actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.btn-outline {
    border-color: #007bff;
    color: #007bff;
}

.btn-outline:hover {
    background: #007bff;
    color: white;
}

.btn-text {
    border: none;
    background: none;
    color: #007bff;
}

.btn-text:hover {
    background: rgba(0, 123, 255, 0.1);
}

.no-alerts {
    text-align: center;
    padding: 40px;
    color: #666;
}

.no-alerts-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.no-alerts-title {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.2rem;
}

.no-alerts-text {
    margin: 0;
    color: #666;
}

/* 模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    margin: 0;
    color: #333;
    font-size: 1.3rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 25px;
}

.analysis-section {
    margin-bottom: 30px;
}

/* 删除重复的section-title样式，使用上面定义的样式 */

.city-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.city-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.activity-selector {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.activity-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
}

.activity-option input {
    transform: scale(1.2);
}

.activity-label {
    font-weight: 500;
}

.impact-card,
.recommendations-card,
.alerts-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

.impact-header,
.recommendations-header,
.alerts-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #444;
    font-size: 1.1rem;
    font-weight: 600;
}

.impact-icon,
.recommendations-icon,
.alerts-icon {
    font-size: 1.8rem;
}

.impact-content,
.recommendations-list,
.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.impact-item,
.recommendation-item,
.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.impact-item:last-child,
.recommendation-item:last-child,
.alert-item:last-child {
    border-bottom: none;
}

.impact-item .item-label,
.recommendation-item .rec-number,
.alert-item .alert-severity {
    font-weight: 500;
    color: #555;
}

.impact-item .item-value,
.recommendation-item .rec-text,
.alert-item .alert-activity,
.alert-item .alert-description {
    font-weight: 600;
    color: #333;
    flex: 1;
    text-align: right;
}

.risk-level-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.risk-level-card.low-risk {
    background: #e8f5e9;
    color: #2e7d32;
}

.risk-level-card.medium-risk {
    background: #fff3e0;
    color: #ef6c00;
}

.risk-level-card.high-risk {
    background: #ffebee;
    color: #c62828;
}

.trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.trend-card {
    background: #f0f7f8;
    border: 1px solid #cce5ed;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trend-date {
    font-size: 0.9rem;
    color: #666;
}

.trend-change {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.change-icon {
    font-size: 1rem;
}

.change-icon.up {
    color: #4CAF50;
}

.change-icon.down {
    color: #F44336;
}

.trend-risk {
    font-size: 0.9rem;
    color: #555;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.metric-icon {
    font-size: 2.5rem;
    color: #667eea;
}

.metric-info {
    text-align: center;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.metric-label {
    font-size: 0.9rem;
    color: #666;
}

.orders-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.order-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.status-icon {
    font-size: 2rem;
}

.status-icon.completed {
    color: #4CAF50;
}

.status-icon.pending {
    color: #ff9800;
}

.status-icon.delayed {
    color: #F44336;
}

.workers-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.worker-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.status-icon.active {
    color: #4CAF50;
}

.status-icon.break {
    color: #FFC107;
}

.status-icon.total {
    color: #2196F3;
}

.weather-impact-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.impact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.impact-icon {
    font-size: 2.5rem;
    color: #667eea;
}

.impact-info {
    text-align: center;
}

.impact-title {
    font-size: 1rem;
    color: #555;
}

.impact-desc {
    font-size: 0.9rem;
    color: #666;
}

.health-overview {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

.health-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #e0f2f7;
    border: 3px solid #667eea;
}

.health-circle.excellent {
    border-color: #4CAF50;
    background: #e8f5e9;
}

.health-circle.good {
    border-color: #8BC34A;
    background: #e8f5e9;
}

.health-circle.fair {
    border-color: #CDDC39;
    background: #f0f4c3;
}

.health-circle.poor {
    border-color: #EF5350;
    background: #ffebee;
}

.health-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.health-label {
    font-size: 0.8rem;
    color: #666;
}

.health-info {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}

.health-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #555;
}

.health-item .health-icon {
    font-size: 1.2rem;
    color: #667eea;
}

.health-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: 0.9rem;
    color: #555;
    min-width: 80px;
    text-align: left;
}

.metric-bar {
    flex: 1;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to right, #667eea, #764ba2);
}

.metric-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    min-width: 50px;
    text-align: right;
}

.maintenance-info {
    margin-top: 20px;
}

.maintenance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
}

.maintenance-icon {
    font-size: 1.2rem;
    color: #667eea;
}

.maintenance-label {
    font-weight: 500;
}

.maintenance-value {
    font-weight: 600;
    color: #333;
}

.recommendations-section {
    margin-top: 20px;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #555;
}

.rec-number {
    font-weight: 600;
    color: #667eea;
}

.safety-overview {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.safety-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stat-icon {
    font-size: 2rem;
    color: #667eea;
}

.stat-info {
    text-align: center;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
}

.incidents-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.incident-item {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.incident-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.incident-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-icon {
    font-size: 1.2rem;
    color: #667eea;
}

.type-name {
    font-weight: 500;
    color: #333;
}

.incident-severity {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.incident-severity.info {
    background: #e0f2f7;
    color: #2196F3;
}

.incident-severity.warning {
    background: #fff3e0;
    color: #FF9800;
}

.incident-severity.danger {
    background: #ffebee;
    color: #F44336;
}

.incident-content {
    margin-bottom: 8px;
}

.incident-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #555;
}

.location-icon {
    font-size: 1.1rem;
    color: #667eea;
}

.incident-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #555;
}

.time-icon {
    font-size: 1rem;
    color: #667eea;
}

.incident-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
}

.incident-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #555;
}

.weather-related {
    display: flex;
    align-items: center;
    gap: 5px;
}

.weather-related.related {
    color: #667eea;
}

.weather-icon {
    font-size: 1rem;
    color: #667eea;
}

.weather-text {
    font-weight: 500;
}

.incident-status {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.incident-status.resolved {
    background: #e8f5e9;
    color: #2e7d32;
}

.incident-status.pending {
    background: #fff3e0;
    color: #ef6c00;
}

.incident-status.urgent {
    background: #ffebee;
    color: #c62828;
}

.safety-trends {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.trend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trend-icon {
    font-size: 2rem;
    color: #667eea;
}

.trend-info {
    text-align: center;
}

.trend-title {
    font-size: 1rem;
    color: #555;
}

.trend-desc {
    font-size: 0.9rem;
    color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .main-content {
        padding: 20px 15px;
    }

    .nav-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .nav-title {
        font-size: 1.5rem;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .alerts-summary {
        justify-content: center;
    }

    .alert-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .alert-actions {
        justify-content: center;
    }

    .activity-selector {
        flex-direction: column;
        gap: 10px;
    }

    .activity-option {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .orders-summary {
        flex-direction: column;
        gap: 15px;
    }

    .order-status-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .workers-summary {
        flex-direction: column;
        gap: 15px;
    }

    .worker-status-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .weather-impact-summary {
        flex-direction: column;
        gap: 15px;
    }

    .impact-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
    }

    .impact-icon {
        font-size: 2rem;
    }

    .impact-info {
        text-align: left;
    }

    .health-overview {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .health-circle {
        width: 80px;
        height: 80px;
    }

    .health-value {
        font-size: 1.5rem;
    }

    .health-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .health-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .health-item .health-icon {
        font-size: 1rem;
    }

    .health-metrics {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
    }

    .metric-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 10px 0;
    }

    .metric-label {
        min-width: auto;
        text-align: left;
    }

    .metric-bar {
        width: 100%;
        height: 6px;
    }

    .metric-value {
        min-width: auto;
        text-align: left;
    }

    .maintenance-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .maintenance-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .maintenance-icon {
        font-size: 1rem;
    }

    .recommendations-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .recommendations-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .recommendation-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .safety-overview {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .safety-stat {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .stat-icon {
        font-size: 1.8rem;
    }

    .stat-info {
        text-align: left;
    }

    .incidents-list {
        flex-direction: column;
        gap: 15px;
    }

    .incident-item {
        flex-direction: column;
        gap: 10px;
    }

    .incident-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .incident-type {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .type-icon {
        font-size: 1.1rem;
    }

    .type-name {
        font-size: 1rem;
    }

    .incident-severity {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.8rem;
    }

    .incident-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .incident-location {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .location-icon {
        font-size: 1.1rem;
    }

    .incident-time {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .time-icon {
        font-size: 1rem;
    }

    .incident-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .weather-related {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .weather-icon {
        font-size: 1rem;
    }

    .weather-text {
        font-size: 0.9rem;
    }

    .incident-status {
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 0.8rem;
    }

    .safety-trends {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .trend-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .trend-icon {
        font-size: 1.8rem;
    }

    .trend-info {
        text-align: left;
    }

    .trend-title {
        font-size: 1rem;
    }

    .trend-desc {
        font-size: 0.9rem;
    }

    /* 实时天气监控模块响应式 */
    .city-selector-section {
        padding: 20px;
    }

    .city-input-group {
        flex-direction: column;
        gap: 15px;
    }

    .main-weather-card {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .weather-details-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .indices-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .life-suggestions-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .forecast-cards {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
    }

    .forecast-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}
</style>